<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Bou Scheduler</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            max-width: 400px;
            width: 100%;
        }
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .login-header h1 {
            color: #007bff;
            font-size: 2rem;
        }
        .error-message {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        .success-message {
            color: #28a745;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h1><i class="bi bi-clock-history"></i> Bou Scheduler</h1>
                <p class="text-muted">延迟任务调度器管理系统</p>
            </div>
            
            <div class="card shadow">
                <div class="card-body p-4">
                    <h5 class="card-title text-center mb-4">管理员登录</h5>
                    
                    <!-- 错误和成功消息显示 -->
                    <div id="messageContainer"></div>
                    
                    <form id="loginForm" action="/login" method="post">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                            <div class="error-message" id="usernameError"></div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                            <div class="error-message" id="passwordError"></div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary" id="loginBtn">
                                <span id="loginBtnText">登录</span>
                                <span id="loginBtnSpinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
                            </button>
                        </div>
                    </form>
                    
                    <div class="text-center mt-3">
                        <small class="text-muted">
                            默认账号: admin / admin123
                        </small>
                    </div>
                    
                    <div class="text-center mt-2">
                        <a href="/test" class="btn btn-outline-secondary btn-sm">测试页面</a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <small class="text-muted">
                    © 2024 Bou Scheduler. 基于Redis和Netty时间轮算法
                </small>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/utils.js"></script>
    <script>
        // 登录表单处理
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            const usernameError = document.getElementById('usernameError');
            const passwordError = document.getElementById('passwordError');
            const messageContainer = document.getElementById('messageContainer');
            const loginBtn = document.getElementById('loginBtn');
            const loginBtnText = document.getElementById('loginBtnText');
            const loginBtnSpinner = document.getElementById('loginBtnSpinner');

            // 检查URL参数中的错误和成功消息
            const urlParams = new URLSearchParams(window.location.search);
            const error = urlParams.get('error');
            const logout = urlParams.get('logout');

            if (error) {
                showMessage('用户名或密码错误', 'danger');
            }

            if (logout) {
                showMessage('您已成功退出登录', 'success');
            }

            // 表单提交处理 - 使用传统表单提交
            loginForm.addEventListener('submit', function(e) {
                // 清除之前的错误消息
                clearErrors();
                
                // 验证表单
                if (!validateForm()) {
                    e.preventDefault();
                    return false;
                }

                // 显示加载状态
                setLoadingState(true);
                
                // 允许表单正常提交
                console.log('表单提交中...');
                return true;
            });

            // 实时验证
            usernameInput.addEventListener('blur', function() {
                validateUsername();
            });

            passwordInput.addEventListener('blur', function() {
                validatePassword();
            });

            // 验证用户名
            function validateUsername() {
                const username = usernameInput.value.trim();
                if (!username) {
                    usernameError.textContent = '请输入用户名';
                    usernameInput.classList.add('is-invalid');
                    return false;
                }
                usernameInput.classList.remove('is-invalid');
                usernameError.textContent = '';
                return true;
            }

            // 验证密码
            function validatePassword() {
                const password = passwordInput.value.trim();
                if (!password) {
                    passwordError.textContent = '请输入密码';
                    passwordInput.classList.add('is-invalid');
                    return false;
                }
                if (password.length < 3) {
                    passwordError.textContent = '密码长度不能少于3位';
                    passwordInput.classList.add('is-invalid');
                    return false;
                }
                passwordInput.classList.remove('is-invalid');
                passwordError.textContent = '';
                return true;
            }

            // 验证整个表单
            function validateForm() {
                const isUsernameValid = validateUsername();
                const isPasswordValid = validatePassword();
                return isUsernameValid && isPasswordValid;
            }

            // 清除错误消息
            function clearErrors() {
                usernameError.textContent = '';
                passwordError.textContent = '';
                usernameInput.classList.remove('is-invalid');
                passwordInput.classList.remove('is-invalid');
            }

            // 显示消息
            function showMessage(message, type) {
                messageContainer.innerHTML = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `;
            }

            // 设置加载状态
            function setLoadingState(loading) {
                if (loading) {
                    loginBtn.disabled = true;
                    loginBtnText.textContent = '登录中...';
                    loginBtnSpinner.classList.remove('d-none');
                } else {
                    loginBtn.disabled = false;
                    loginBtnText.textContent = '登录';
                    loginBtnSpinner.classList.add('d-none');
                }
            }

            // 回车键提交
            document.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && (e.target === usernameInput || e.target === passwordInput)) {
                    loginForm.dispatchEvent(new Event('submit'));
                }
            });

            // 页面加载完成后的调试信息
            console.log('登录页面加载完成');
            console.log('当前URL:', window.location.href);
            console.log('表单已准备就绪');
        });
    </script>
</body>
</html>
